<template>
  <div class="m-login-container">
    <div class="left-promotion-wrapper">
      <div class="inner g-font-bold g-absolute-center">
 <p class="title">Welcome to ERP</p>
      <p class="sub-title">
        A Few Click Away From Creating
        <br />
        Your Business
      </p>
      </div>

    </div>
    <div class="login-main-wrapper">
      <div class="login-fill-content inner g-absolute-center">
        <p class="login-title g-font-bold">Login To Backen Management</p>
        <el-form
          ref="loginForm"
          :model="loginForm"
          class="login-form"
          :rules="loginRules"
          autocomplete="on"
          label-position="top"
        >
          <el-form-item>
            <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="用户名"
              name="username"
              type="text"
              autocomplete="on"
            >
              <div slot="prefix">
                <span class="el-icon-user input-prefix-icon" />
              </div>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              :type="passwordType"
              placeholder="密码"
              name="password"
              autocomplete="on"
              @keyup.enter.native="handleLogin"
            >
              <div slot="prefix">
                <span class="el-icon-lock input-prefix-icon" />
              </div>
            </el-input>
          </el-form-item>
          <el-button
            :loading="loading"
            type="primary"
            @click="handleLogin"
            class="login-btn"
          >
            登陆
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { validUsername } from "@/utils/validate";
export default {
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error("Please enter the correct user name"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("The password can not be less than 6 digits"));
      } else {
        callback();
      }
    };

    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
      },
      passwordType: "password",
      loading: false,
      redirect: undefined,
      otherQuery: {},
    };
  },
  computed: {},
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    /*
     * @Desc: 登录
     * @params: {String}
     * @return: {Object}
     */
    async handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return;
        this.loading = true;
        const params = {
          username: this.loginForm.username, // 17621887294
          password: this.loginForm.password, // jacksoom1234
        };
        const { data } = await this.$api.app.login(params);
        const { code } = data;
        if (code === 200) {
          this.$router.push({
            path: this.redirect || "/",
            query: this.otherQuery,
          });
        } else {
          this.$message("登录名或密码错误");
        }
        this.loading = false;
      });
    },

    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
  },
};
</script>

<style lang="less" scoped>

.m-login-container {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: flex-end !important;
  background: #1f91f5;
  color: #ffffff;
  .left-promotion-wrapper {
    position: relative;
    padding: 0;
    height: 100%;
    width: 50%;
    text-align: center;
    background: url("~@/assets/images/login/bg.png") no-repeat center center,
        url("~@/assets/images/login/pgs-vertical.png") no-repeat center 92%;
      background-size: 100% 100%, 335px 56px;
    .inner{
      height: 160px;
    }
    .title {
      font-size: 72px;
      line-height: 72px;
      margin-bottom: 10px;
      text-transform: capitalize;
    }
    .sub-title {
      font-size: 20px;
      line-height: 32px;
    }
  }
  .login-main-wrapper {
    width: 50%;
    right: 0;
    background: #ffffff;
    position: relative;
    .login-fill-content {
      width: 400px;
      height: 230px;
      padding: 0 8px;
    }
    .login-title {
      font-size: 20px;
      line-height: 32px;
      text-align: center;
      color: #343a40;
    }
  }
}

/deep/.login-form {
  margin: 24px 0 8px;
  .el-form-item {
    margin-bottom: 16px;
    .el-input__prefix {
      color: #343A40;
    }
    .input-prefix-icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      font: 14px;
    }
  }
  .login-btn {
    width: 100%;
  }

  .el-input--prefix .el-input__inner {
    padding-left: 28px;
  }
}
</style>
